/* eslint-disable vue/html-indent */
/* eslint-disable vue/html-indent */
<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select
        v-model="listQuery.gender"
        clearable
        placeholder="性别"
        style="width: 100px"
      >
        <el-option label="未知" value="0" />
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
      <el-select
        v-model="listQuery.state"
        clearable
        filterable
        placeholder="国家"
        style="width:100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="value"
        />
      </el-select>
      <el-select
        v-model="listQuery.channel"
        clearable
        filterable
        placeholder="渠道"
        style="width: 150px"
      >
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-select
        v-model="listQuery.abTest"
        clearable
        placeholder="ab测试"
        style="width: 150px"
      >
        <el-option
          v-for="(test, i) in abTests"
          :key="i"
          :label="test"
          :value="test"
        />
      </el-select>
      <el-select v-model="listQuery.bundleId" clearable placeholder="包名">
        <el-option label="花伴交友app安卓" value="com.vchat.flower" />
        <el-option label="花伴交友app苹果" value="com.vchat.flower.ios" />
        <el-option label="花伴约会app安卓" value="com.date.flower" />
        <el-option label="花伴约会app苹果" value="com.date.flower.ios" />
        <el-option label="成人约会圈app安卓" value="com.chengren.yhq" />
        <el-option label="他趣附近约会app安卓" value="com.funnychat.mask" />
      </el-select>
      <el-select
        v-model="listQuery.version"
        clearable
        placeholder="客户端版本"
        style="width: 150px"
      >
        <el-option
          v-for="(version, i) in versions"
          :key="i"
          :label="version"
          :value="version"
        />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
        >查询</el-button
      >
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
        >重置</el-button
      >
      <export-excel />
    </div>
    <div class="cs-filter-result">
      <AdvanceTable
        :loading="listLoading"
        :columns="columns"
        :list="list"
        :height="'calc(100vh - 300px)'"
      >
        <template slot="remain1Day" slot-scope="{ row }">
          {{
            row.remain1Day === null
              ? '-'
              : ((row.remain1Day / row.activateCount) * 100).toFixed(2) +
                '%(' +
                row.remain1Day +
                ')'
          }}
        </template>
        <template slot="videoCount_avg_time" slot-scope="{ row }">
          {{
            parseInt(
              row.videoCount === 0
                ? 0
                : row.videoAverageTime / row.videoCount / 1000 / 60
            )
          }}:{{
            row.videoCount === 0
              ? 0
              : (row.videoAverageTime / row.videoCount / 1000).toFixed(0) % 60
          }}
        </template>
        <template slot="addChatTicketCount_percent" slot-scope="{ row }">
          {{
            row.addChatTicketCount === 0
              ? 0
              : (
                  (Math.abs(row.expendChatTicketCount) /
                    row.addChatTicketCount) *
                  100
                ).toFixed(2)
          }}
          %
        </template>
        <template slot="addVideoTicketCount_percent" slot-scope="{ row }">
          {{
            row.addVideoTicketCount === 0
              ? 0
              : (
                  (Math.abs(row.expendVideoTicketCount) /
                    row.addVideoTicketCount) *
                  100
                ).toFixed(2)
          }}
          %
        </template>
        <template slot="addVoiceTicketCount_percent" slot-scope="{ row }">
          {{
            row.addVoiceTicketCount === 0
              ? 0
              : (
                  (Math.abs(row.expendVoiceTicketCount) /
                    row.addVoiceTicketCount) *
                  100
                ).toFixed(2)
          }}
          %
        </template>
      </AdvanceTable>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
import AdvanceTable from '@/components/AdvanceTable'
import TablePagination from '@/components/TablePagination'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import { xhroverviewList, xhrChannels, xhrVersions } from '@/api/analysis'
import ExportExcel from '@/components/ExportExcel'
import { parseTime } from '@/filters'
import { getCountryItem } from '@/filters'

export default {
  name: 'Home',
  components: { AdvanceTable, TablePagination, ExportExcel },
  data() {
    return {
      list: [],
      channels: [],
      abTests: [],
      versions: [],
      total: 0,
      listLoading: true,
      listQuery: {
        offset: 0,
        limit: 100,
        startTime: null,
        endTime: null,
        channel: null,
        gender: null,
        abTest: null,
        bundleId: null,
      },
      countryCodeItem: getCountryItem(),
      daterangeValue: '',
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      columns: [
        {
          key: 'targetDate',
          label: '日期',
          filter: function (val) {
            return parseTime(val, '{y}-{m}-{d}')
          },
          visible: true,
        },
        {
          key: 'activateCount',
          label: '激活',
          visible: true,
        },
        {
          key: 'activateCount1',
          label: '男激活',
          visible: true,
        },
        {
          key: 'activateCount2',
          label: '女激活',
          visible: true,
        },
        {
          key: 'activateCount0',
          label: '未知激活',
          visible: true,
        },
        {
          key: 'activeCount',
          label: '登录人数',
          visible: true,
        },
        {
          key: 'remain1Day',
          label: '次日留存',
          visible: true,
          slot: true,
        },
        {
          key: 'totalRecharge',
          label: '总充值',
          visible: true,
          filter: (val) => {
            return val / 100
          },
        },
        {
          key: 'totalWithdraw',
          label: '提现金额',
          visible: true,
          filter: (val) => {
            return val / 100
          },
        },
        {
          key: 'newApprenticeCount',
          label: '新增徒弟人数',
          visible: true,
        },
        {
          key: 'newPaymentCount',
          label: '新增付费人数',
          visible: true,
        },
        {
          key: 'voiceCount',
          label: '语音接听次数',
          visible: true,
        },
        {
          key: 'videoCount',
          label: '视频接通次数',
          visible: true,
        },
        {
          key: 'videoCount_avg_time',
          label: '视频平均时长',
          visible: true,
          slot: true,
        },
        {
          key: 'addChatTicketCount',
          label: '私聊券增加',
          visible: true,
        },
        {
          key: 'expendChatTicketCount',
          label: '私聊券消耗',
          visible: true,
        },
        {
          key: 'addVideoTicketCount',
          label: '视频卡增加',
          visible: true,
        },
        {
          key: 'expendVideoTicketCount',
          label: '视频卡消耗',
          visible: true,
        },
        {
          key: 'addVoiceTicketCount',
          label: '语音卡增加',
          visible: true,
        },
        {
          key: 'expendVoiceTicketCount',
          label: '语音卡消耗',
          visible: true,
        },
        {
          key: 'addChatTicketCount_percent',
          label: '私聊券使用率',
          visible: true,
          slot: true,
        },
        {
          key: 'addVideoTicketCount_percent',
          label: '视频卡使用率',
          visible: true,
          slot: true,
        },
        {
          key: 'addVoiceTicketCount_percent',
          label: '语音卡使用率',
          visible: true,
          slot: true,
        },
      ],
    }
  },
  created() {
    this.getChannels()
    this.getVersions()
    this.doSearch()
  },
  methods: {
    getVersions() {
      xhrVersions().then((resp) => {
        this.versions = resp.data
      })
    },
    getChannels() {
      xhrChannels().then((resp) => {
        // console.log(resp)
        this.channels = resp.data
      })
    },
    doSearch() {
      this.listQuery.excel = 1
      xhroverviewList(this.listQuery).then((resp) => {
        this.listLoading = false
        this.total = resp.data.count
        this.abTests = resp.data.abTests
        this.list = resp.data.list
      })
    },
  },
}
</script>
